<template>
  <div id="loginView">
    <el-form class="elForm"
             :model="ruleForm"
             ref="ruleFormref"
             :rules="rules"
             @keypress.enter="submitForm">
      <el-form-item label="账号"
                    prop="username">
        <el-input v-model="ruleForm.username"
                  type="text"
                  :autocomplete="ruleForm.remPwd?'on':'off'"
                  ref="usernameRef"
                  placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="密码"
                    prop="pwd">
        <el-input v-model="ruleForm.pwd"
                  type="password"
                  :autocomplete="ruleForm.remPwd?'on':'off'"
                  placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="ruleForm.remPwd">记住密码</el-checkbox>
        <el-button style="float: right"
                   type="text"
                   @click="submitForm('ruleForm')">忘记密码?</el-button>
      </el-form-item>
      <el-form-item>
        <el-button style="width: 100%;"
                   type="primary"
                   @click="submitForm('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import mock from "@/mock";
import axios from "@/axios";
mock.doLogin();
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();
let ruleFormref = ref(null);
interface RuleForm {
  // username: string;
  // pwd: string;
  // remPwd: Boolean;
  [propName: string]: any;
}
var obj: RuleForm = {
  // username: "123",
  // pwd: "123123",
  // remPwd: true,
  // prop: 'adf'
  
};
obj.a = 2334;
interface SearchFunc {
  (source: string, subString: string): boolean;
}
let searchFunc: SearchFunc = function (source, subString) {
  let result = source.search(subString);
  return result > -1;
};
console.log('searchFunc',searchFunc('abcd','1'))
let ruleForm: RuleForm = reactive({
  username: "",
  pwd: "",
  remPwd: false,
  a: 123,
});
var usernameRef = ref(null);
const doLogin = () => {
  axios.post("/doLogin", ruleForm).then((res) => {
    if (res.code === 200) {
      if (ruleForm.remPwd) {
        localStorage.setItem("loginData", JSON.stringify(ruleForm));
      } else {
        localStorage.removeItem("loginData");
      }
      localStorage.setItem("loginName", ruleForm.username);
      router.push({ name: "home" });
    }
  });
};
const submitForm = () => {
  ruleFormref.value.validate((valid: Boolean) => {
    valid && doLogin();
  });
};
let rules = {
  username: [{ required: true, message: "请输入", trigger: "blur" }],
  pwd: [{ required: true, message: "请输入", trigger: "blur" }],
};
interface PersonFace {
  name: string,
  age: number,
  intro: Function
}
class Person implements PersonFace {
  name = '';
  age = 0;
  intro () {

  }
}
onMounted(() => {
  if (localStorage.getItem("loginData")) {
    var loginData = JSON.parse(localStorage.getItem("loginData"));
    ruleForm.username = loginData.username;
    ruleForm.pwd = loginData.pwd;
    ruleForm.remPwd = loginData.remPwd;
  }
  console.log("usernameRef", usernameRef);
  usernameRef.value.focus();
  function add(a: number) {
    var sum = function (b: number) {
      return a + b;
    };
    return sum;
  }
  console.log(add(1));
  var str: string = `function add (a,b) {alert(a + b)};add(2,2)`;
  // eval(str)
  try {
    console.log(bbbb);
  } catch (err) {
    console.error(err);
  }

  var bbbb;
});
</script>
<style lang="scss">
#loginView {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(84, 92, 100);
  .elForm {
    height: fit-content;
    padding: 20px 20px 0;
    border-radius: 5px;
    background: #fff;
  }
}
</style>